<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0",user-scalable=no>
<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<body id="body" style="background: #F6F6F6">
<header th:include="cultivateWeb/header :: header"></header>
<style>
    * {
        font-size: 14px
    }

    .left {
        float: left;
        margin-right: 20px
    }
</style>
<main id="main" style="background:#F6F6F6">
    <section id="pay">
        <input type="hidden" id="orderId" th:value="${orderId}"/>
        <input type="hidden" id="courseId" th:value="${courseId}"/>
        <input type="hidden" id="type" th:value="${type}"/>
        <div style="border-bottom: 2px solid #F6F6F6;padding-bottom: 10px">
            <span style="font-weight: bold" id="orderTxt"></span>
        </div>
        <div class="div_3 step_3">
            <img style="width:568px" src="/img/payStep1.png"/>
            <span class="step1 this1">确认订单</span>
            <span class="step2">支付</span>
            <span class="step3">支付成功</span>
        </div>
        <div class="flex" id="courseData" style="width:100%;margin-top:140px;padding: 10px">
        </div>
        <div class="flex" id="orderData" style="width:100%;padding: 10px">
        </div>
    </section>
</main>
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script>

    $(function () {
        getCourse();
        getOrder();
    });
    <!--type为0，入口为提交订单报名，为1，入口为查看订单详情-->
    var type = $("#type").val();

    function getCourse() {
        ajaxToken("/jzApi/courses/selCourseDetails", "GET", {
            id: $("#courseId").val()
        }, function (res) {
            if (res == '') {
                $("#courseData").html('<div class="noData">暂无数据</div>');
            } else {
                var b = '';
                if (res.type == 0) {
                    b = '<span style="color: #FF9500">(证书课程)</span>'
                } else if(res.type == 1){
                    b = '<span style="color: #569175">(师资培训课程)</span>'
                } else if(res.type == 2){
                    b = '<span style="color: #569175">(考评员培训课程)</span>'
                } else if(res.type == 3){
                    b = '<span style="color: #569175">(高级师资培训课程)</span>'
                } else if(res.type == 4){
                    b = '<span style="color: #569175">(高级考评员培训课程)</span>'
                }

                var a = '<a href="/couInfo/couInfo?id=' + res.id + '" target="_blank"><div style="padding: 20px;background: #F8F9FB">' +
                    '                <div class="title" style="margin-top: 20px;padding-left:0">商品信息</div>' +
                    '                <div class="mar10">' +
                    '<div class="left" style="width:130px"><img style="width:100%;height:105px;" src="' + res.thumbnail + '"></div>' +
                    '<div class="left">' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">商品名称</span>' +
                    '                    <span class="black">' + res.name + b + '</span>' +
                    '                </div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">商品金额</span>' +
                    '                    <span class="black">' + res.specialPrice + '元</span><span style="text-decoration: line-through;color:#999;font-size:14px">' + res.guidancePrice + '元</span>' +
                    '                </div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">讲师姓名</span>' +
                    '                    <span class="black">' + res.teacherName + '</span>' +
                    '                </div>' +
                    '</div><div style="clear: both"></div>' +
                    '                </div>' +
                    '            </div></a>';
                $("#courseData").html(a);

                if (type == 0) {
                    $("#orderTxt").text("确认订单");
                } else {
                    $("#courseData").css("margin-top", "0");
                    $("#orderTxt").html('<a href="/cultivate/myOrder">我的订单</a> > 订单详情');
                    $(".step_3").hide();
                }
            }
        })
    }

    function getOrder() {
        ajaxToken("/jzApi/courses/selMyCourseOrderDetials", "GET", {
            id: $("#orderId").val()
        }, function (res) {
            if (res == '') {
                $("#orderData").html('<div class="noData">暂无数据</div>');
            } else {
                var b = '', c = '';
                if (res.orderAmount != '0.0') {  //非免费课程
                    if (res.state == 1) {
                        c = '<span style="color: #fe7252;font-size:22px">（待付款）</span>';
                        b = '<div style="text-align: right"><div class="price_1"><span style="font-size: 14px">应付款：</span>¥<span class="price">' + res.orderAmount + '</span></div>' +
                            '<a class="payBtn" href="/couInfo/coursePay?courseOrderId=' + res.id + '&courseAmount=' + res.orderAmount + '&courseId=' + res.objectId + '">立即支付</a> </div>'
                    } else {
                        c = '<span style="color: #005C34;font-size:22px">（已付款）</span>';
                    }
                } else {
                    if (type == 0) {
                        b = '<div style="text-align: right"><a class="payBtn" href="/cultivate/study/studyInfo?isTestScores=0&id=' + res.objectId + '&taskId=&classId=">去学习</a></div>'
                    }
                    $("#courseData").css("margin-top", "0");
                    $("#orderTxt").text("报名成功");
                    $(".step_3").hide();
                    c = '<span style="color: #005C34;font-size:22px">（报名成功）</span>';
                }

                var a = '  <div style="padding: 20px;background: #F8F9FB">' +
                    '                <div class="title" style="margin-top: 20px;padding-left:0">订单信息' + c + '</div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">订&nbsp;&nbsp;单&nbsp;&nbsp;号</span>' +
                    '                    <span class="black">' + res.id + '</span>' +
                    '                </div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">订单金额</span>' +
                    '                    <span class="black">' + res.orderAmount + '元</span>' +
                    '                </div>' +
                    '                <div class="mar10">' +
                    '                    <span class="gray">下单时间</span>' +
                    '                    <span class="black">' + res.payTime + '</span>' +
                    '                </div>' +
                    b +
                    '            </div>';
                $("#orderData").html(a);
            }
        })
    }


</script>
</body>
</html>